<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${envName != null ? '版本管理 - ' + envName + '环境' : '版本管理'}"></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container style="">
        <el-header style="text-align: left; font-size: 15px;padding-left: 30px;">
            <el-button @click="backClick()" type="primary">返回</el-button>
        </el-header>
        <div style="border: 1px solid #777777;"></div>
        <el-main>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="id">
                    <el-input v-model="form.id_" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="项目标识" prop="project_code">
                    <el-input v-model="form.project_code"></el-input>
                </el-form-item>
                <el-form-item label="版本号" prop="version">
                    <el-input v-model="form.version"></el-input>
                </el-form-item>
                <el-form-item label="版本名称" prop="version_name">
                <el-input v-model="form.version_name"></el-input>
                </el-form-item>
                <el-form-item label="强制版本" prop="force_version">
                    <el-input v-model="form.force_version"></el-input>
                </el-form-item>
                <el-form-item label="型号" prop="version_name">
                    <el-input v-model="form.model"></el-input>
                </el-form-item>
                <el-form-item label="固件">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="upAction"
                            name="fileUpload"
                            :limit=1
                            :on-success="uploadSuccess"
                            :multiple=true>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">请上传固件文件，且不超过10M</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="固件名称" prop="file_name">
                    <el-input v-model="form.file_name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="固件下载地址">
                    <el-input v-model="form.file_path" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="固件1">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="upAction"
                            name="fileUpload"
                            :limit=1
                            :on-success="uploadSuccess1"
                            :multiple=true>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">请上传固件文件，且不超过10M</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="固件名称1" prop="file_name1">
                    <el-input v-model="form.file_name1" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="固件下载地址1">
                    <el-input v-model="form.file_path1" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="版本描述">
                    <el-input v-model="form.remark1"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            var _data = [[${_data}]];
            var ctxPath = [[${ctxPath}]];
            return {
                ctxPath: ctxPath,
                form: {
                    id_: _data.id_ ? _data.id_ : "",
                    remark:  _data.remark ? _data.remark : "",
                    project_code:  _data.project_code ? _data.project_code : "",
                    file_name:  _data.file_name ? _data.file_name : "",
                    file_path:  _data.file_path ? _data.file_path : "",
                    file_name1:  _data.file_name ? _data.file_name1 : "",
                    file_path1:  _data.file_path ? _data.file_path1 : "",
                    remark1:  _data.remark1 ? _data.remark1 : "",
                    version:  _data.version != undefined ? _data.version : "",
                    version_name:  _data.version_name ? _data.version_name : "",
                    model:  _data.model ? _data.model : "",
                    force_version : _data.force_version ? _data.force_version : "0",
                },
                rules: {
                    project_code: [
                        {required: true, message: '请输入项目标识', trigger: 'blur'}
                    ],
                    version: [
                        {required: true, message: '请输入版本号', trigger: 'blur'}
                    ],
                    version_name: [
                        {required: true, message: '请输入版本名称', trigger: 'blur'}
                    ],
                    file_name: [
                        {required: true, message: '请选择固件附件', trigger: 'blur'}
                    ],
                    force_version: [
                        {required: true, message: '请输入强制版本号', trigger: 'blur'}
                    ],
                },
                token: sessionStorage.getItem('token'),
                upAction: ctxPath +"/uploadFile?token="+sessionStorage.getItem('token')
            }
        },
        methods: {
            uploadSuccess: function(response, file, fileList) {
                this.form.file_name = response.filename;
                this.form.file_path = response.filepath;
                var result = this.extractHexPart(response.filename);
                this.form.version = parseInt(result)
            },
            uploadSuccess1: function(response, file, fileList) {
                this.form.file_name1 = response.filename;
                this.form.file_path1 = response.filepath;
            },
            extractHexPart(str) {
                // 按下划线分割字符串
                const parts = str.split('_');
                // 查找以0x开头的部分
                for (const part of parts) {
                    if (part.startsWith('0x')) {
                        // 去除可能的后缀（如.x.bin）
                        return part.split('.')[0];
                    }
                }
                // 如果未找到，返回空字符串或提示
                return '';
            },
            onSubmit: function() {
                var _this = this;
                _this.$refs.form.validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: this.ctxPath +"/firmwareUpgrade/save?token=" + sessionStorage.getItem("token"),
                            type: 'POST',
                            data: JSON.stringify(this.form),
                            dataType: 'json',
                            contentType:"application/json;charset=utf-8",
                            success: function (data) {
                                if (data.code == 0) {
                                    _this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    });
                                    if(_this.form.id_ == undefined || _this.form.id_ == ''){
                                        window.location.href = _this.ctxPath + '/list?token=' + sessionStorage.getItem("token");
                                    }
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            backClick(){
                window.location.href = this.ctxPath + '/list?token=' + sessionStorage.getItem("token");
            }
        }
    })
</script>
</html>